<template>
<!--    <view class="category-ti">
      <view class="category-title">分类</view>
    </view> -->
    <scroll-view scroll-y="true" class="scroll-Y" :style="{ height: '94vh' }">
        <Tabs @changeTabs="changeTabs" :list="list" :current="currentTab"></Tabs>
        <view class="category-wrapper">
            <ListContent :list="cards" keyof="id">
                <template #default="{ item, index }">
                    <InfoCard position="cate" :data="item" :key="item.id">
                    </InfoCard>
                </template>
            </ListContent>
        </view>
        <view class="push" @click="toPush">
            <img style="width: 150rpx;height: 150rpx;" src="@/assets/images/push-btn.png" alt="">
        </view>
    </scroll-view>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import ListContent from '@/components/ListContent/ListContent.vue'
import Tabs from '@/components/Tabs/Tabs.vue'
import InfoCard from '@/components/InfoCard/InfoCard.vue'
import { onPullDownRefresh } from '@dcloudio/uni-app';
import Api from '@/apis/api'
import { showToast, showLoading } from '@/utils/prompt'

let list = ref([]);
let cards = ref([])
let currentTab = ref(1)
let total = 0

let pageData = {
    records:[],
    pageNo:0,
    pageSizes:2

}
let  queryParam ={
    pageNo:0,
    pageSizes:2,
    wishClass:0
}

function changeTabs(id: number) {
    queryParam.wishClass=id
    const  promise = new Promise((resolve, reject) =>{
        const data = Api.getWishByClass(queryParam);
        resolve(data)
    })
    promise.then(data =>{
        if(data.code==200){
            console.log("data 长啥样 =====",data)
            pageData.records = data.data
            cards.value=data.data
        }else {
            showToast('数据请求失败')
        }
    })
}
function toPush() {
    uni.reLaunch({
        url: '/pages/push/push'
    })
}
function onReachBottom() {
    alert("触底事件")
    //触底事件
    if (queryParam.pageNo * queryParam.pageNo >=total) {
        uni.showToast({
            title: '没有更多数据了',
            icon: 'none',
            duration: 1000
        });
        setTimeout(() => {
            uni.hideLoading()
        }, 500)
    } else {
        if (this.data.pageNum <= this.data.pageNum - 1) {
            setTimeout(() => {
                uni.hideLoading()
            }, 500)
        } else {
            uni.showLoading({
                title: '加载中'
            });
            this.data.pageNum++
            this.getList()
        }
        setTimeout(() => {
            uni.hideLoading()
        }, 500)
    }
}
onPullDownRefresh(() => {
    getData().finally(() => {
        uni.stopPullDownRefresh()
    })
})

async function getData() {
    await Api.getWishClass().then(({ data }) => {
        list.value = data.map((value: any) => ({ id: value.id, name: value.className }))
    })
    if (list.value.length > 0) {
        currentTab.value = list.value[0].id
        queryParam.wishClass=currentTab.value
        const  promise = new Promise((resolve, reject) =>{
            const data = Api.getWishByClass(queryParam);
            resolve(data)
        })
        promise.then(data =>{
            if(data.code==200){
                console.log("data 长啥样 =====",data)
                pageData.records = data.data
                cards.value=data.data
                total= data.total
            }else {
                showToast('数据请求失败')
            }
        })
    }
}
/*function onReachBottom() { //触底事件
    if (this.data.pageNum * this.data.pageSize >= this.total) {
        uni.showToast({
            title: '没有更多数据了',
            icon: 'none',
            duration: 1000
        });
        setTimeout(() => {
            uni.hideLoading()
        }, 500)
    } else {
        if (this.data.pageNum <= this.data.pageNum - 1) {
            setTimeout(() => {
                uni.hideLoading()
            }, 500)
        } else {
            uni.showLoading({
                title: '加载中'
            });
            this.data.pageNum++
            this.getList()
        }
        setTimeout(() => {
            uni.hideLoading()
        }, 500)
    }
}*/

onMounted(() => {
    getData()
})

</script>

<style lang="scss" scoped>
page {
    background: #f8f8f8;
}

.category-wrapper {
    padding: 0 30rpx;
    height: 100%;
    padding-bottom: 80rpx;
}
.category-ti{
  width: 375px;
  height: 30px;
  font-size: 24px;
}
.category-title{
  margin-top: 10px;
  height: 20px;

}

.push {
    position: fixed;
    right: 30rpx;
    top: 70%;
}
</style>
